<template>
  <div class="account-box">
    <div class="form">
      <!-- 使用Form组件配置校验规则和错误对象 -->
      <!-- mySchema:自定义的校验规则对象
      errors：有作用域插槽导出的内部错误对象 放到市校验不过时的错误提示语 -->
      <!-- ref="formTarget"用ref来获取组件对象 -->
      <Form
        class="form"
        :validation-schema="mySchema"
        v-slot="{ errors }"
        autocomplete="off"
        ref="formTarget"
      >
        <div class="form-item">
          <div class="input">
            <i class="iconfont icon-user"></i>
            <!-- 使用 Field 组件，添加表单项目校验 步骤说明：
            1. 把input改成 Field组件，默认解析成input
            2. Field添加name属性，作用是指定使用schema中哪个校验规则
            3.Field添加v-model，作用是提供表单数据的双向绑定
            4.发生表单校验错误，显示错误类名error，提示红色边框 -->

            <Field
              v-model="form.account"
              name="account"
              type="text"
              placeholder="请输入用户名"
              :class="{ error: errors.account }"
            />
            <!-- <input type="text" placeholder="请输入用户名或手机号" /> -->
          </div>

          <!-- 表单验证错误信息提示 -->
          <div class="error" v-if="errors.account">
            <i class="iconfont icon-warning" />
            {{ errors.account }}
          </div>
        </div>
        <div class="form-item">
          <div class="input">
            <i class="iconfont icon-lock"></i>
            <Field
              :class="{ error: errors.password }"
              v-model="form.password"
              name="password"
              type="password"
              placeholder="请输入密码"
            />
            <!-- <input type="password" placeholder="请输入密码" /> -->
          </div>
          <div class="error" v-if="errors.password">
            <i class="iconfont icon-warning" />{{ errors.password }}
          </div>
        </div>
      </Form>
      <a href="javascript:;" class="btn" @click="btn">登录</a>
    </div>
  </div>
</template>

<script>
// 重点：表单校验
// vee-validator兼容 2 和 3 是在不使用组件库的情况下，只需要一个表单校验的功能
// 步骤1：安装包 @4.0.3（这个是版本号，目前是比较适合稳定的）
// 步骤2：导入两个组件 Form Field（局部组件需要注册）
// 步骤3：配置Fidle（
// 1.name指定校验规则
// 2.v-model指定的双向绑定
// 3.替换input
// 4.：chalss控制error
// 步骤4：配置Form（绑定规则对象+导出校验错误对象errors）
// 步骤5：错误提示语（v-if+ErrorMessage.account）
// 步骤6：兜底校验（ref获取组件实例对象+调用validate方法[promise])
import { Field, Form } from 'vee-validate'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import Message from '../../../components/Message/index/index.js'// 导入提示组件封装插件
import { findCartList } from '@/api/care.js'
export default {
  components: {
    Field,
    Form
  },
  setup () {
    // 定义表单双向绑定的数据
    const form = reactive({
      account: '', // 账号
      password: ''// 密码
    })
    // 定义我们自己的校验对象
    const mySchema = {
      account (value) {
        if (!value) return '请输入用户名'
        return true
      },
      password (value) {
        if (!value) return '请输入密码'
        if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'
        return true
      }
    }
    //   表单兜底校验
    // 实现步骤：
    // 1. 通过ref获得表单组件对象
    // 2. 执行组件对象身上的validate方法 （执行完毕返回promise对象）

    const formTarget = ref(null)
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    async function btn () {
      const res = await formTarget.value.validate()// 兜底校验
      // 兜底校验没有问题了，才可以跳转到后台，因此token肯定是要在兜底校验里进项判断
      if (res) {
        // 18.1要把vuex里的面对数据放在这里，用到actions函数调用，因此先导入一个useStore才可以拿到数据
        //      之后用语法store.dispatch('模块名字/acctions起的方法',接口参数)
        // 18.1 from是因为上面定义了这个这个from里面也有接口要的两个参数{ account, password }
        await store.dispatch('user/userAccountLoginToken', form)
        // 跳转这里会等到上面的action函数中异步结束后才跳吗？答案 并不是，异步会先跳转，但是这样会以后报错的，
        // 必须需求保证之后 数据完全返回之后才可以跳转
        // 因为进入首页之后可能有些业务接口是依赖于token
        // 因此解决的办法是在store前面加上await，因为dispatch也是原型对象
        // 跳入登入页
        // router.push('/')
        // 20.3在这里进项判断针对，针对跳入，下次依旧登入访会原来地址
        // 先让他寻找top-nav组件的退出的参数，而我这里也要拿到这个参数，

        const redirectUrl = route.query.redirectUrl
        // 如果这里有redirectUrl这个那么就让他跳转到  退出登录行为时完整地址 fullPath path + 路径参数
        if (redirectUrl) {
          router.push({ path: decodeURIComponent(redirectUrl) }
          )// 转回来反转义一下
        } else {
          router.push({ path: '/' })
        }
        // 导入提示组件封装插件
        // 给用户提示
        Message({
          type: 'success',
          text: '登录成功'
        })
        const res = await findCartList([])
        store.commit('care/setCartList', res.result)
      }
    }
    return {
      form,
      mySchema,
      formTarget,
      btn

    }
  }
}
</script>
<style lang="less" scoped>
// 账号容器
.account-box {
  .toggle {
    padding: 15px 40px;
    text-align: right;
    a {
      color: @xtxColor;
      i {
        font-size: 14px;
      }
    }
  }
  .form {
    padding: 0 20px 20px 20px;
    &-item {
      margin-bottom: 28px;
      .input {
        position: relative;
        height: 36px;
        > i {
          width: 34px;
          height: 34px;
          background: #cfcdcd;
          color: #fff;
          position: absolute;
          left: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 18px;
        }
        input {
          padding-left: 44px;
          border: 1px solid #cfcdcd;
          height: 36px;
          line-height: 36px;
          width: 100%;
          &.error {
            border-color: @priceColor;
          }
          &.active,
          &:focus {
            border-color: @xtxColor;
          }
        }
        .code {
          position: absolute;
          right: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 14px;
          background: #f5f5f5;
          color: #666;
          width: 90px;
          height: 34px;
          cursor: pointer;
        }
      }
      > .error {
        position: absolute;
        font-size: 12px;
        line-height: 28px;
        color: @priceColor;
        i {
          font-size: 14px;
          margin-right: 2px;
        }
      }
    }
    .agree {
      a {
        color: #069;
      }
    }
    .btn {
      display: block;
      width: 100%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      background: @xtxColor;
      &.disabled {
        background: #cfcdcd;
      }
    }
  }
  .action {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .url {
      a {
        color: #999;
        margin-left: 10px;
      }
    }
  }
}
</style>
